<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<style type="text/css">
			.mui-bar { -webkit-box-shadow: 1,1,1,#000; box-shadow: 1,1,1,#000; background: #000; color: #999;}
			.mui-bar-tab .mui-tab-item.mui-active,.mui-bar-tab .mui-tab-item:hover,.mui-bar-tab .mui-tab-item:active { color: #fdd100;}
			.mui-bar-tab .mui-tab-item .circle { text-align: center; width: 34px; height: 34px; line-height: 34px; border-radius: 100%; background: #999; z-index: 99; margin: 0 auto; }
			.mui-bar-tab .mui-tab-item .circle .mui-icon{ font-size: 34px; color: #000; font-weight: bold; margin: -2px 0 0 -11px; } 
			.mui-bar-tab .mui-tab-item.mui-active .circle .mui-icon,.mui-bar-tab .mui-tab-item:hover .circle .mui-icon,.mui-bar-tab .mui-tab-item:active .circle .mui-icon { color: #fdd100;}
		</style>
	</head>

	<body>
		<nav class="mui-bar mui-bar-tab" id="navFooter">
			<a class="mui-tab-item mui-active" id="home">
				<span class="mui-icon mui-icon-home-filled"></span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="mui-tab-item" id="discover">
				<span class="mui-icon mui-icon mui-icon-videocam"></span>
				<span class="mui-tab-label">发现</span>
			</a>
			<a class="mui-tab-item" id="classify/index">				
	            <div class="circle"> 
	               <span class="mui-icon mui-icon-plusempty"></span>
	            </div> 
			</a>
			<a class="mui-tab-item" id="show">
				<span class="mui-icon mui-icon-starhalf"></span>
				<span class="mui-tab-label">舞友秀</span>
			</a>
			<a class="mui-tab-item" id="account">
				<span class="mui-icon mui-icon-contact"></span>
				<span class="mui-tab-label">我的</span>
			</a>
		</nav>
		<script src="js/mui.min.js"></script>

		<script type="text/javascript" charset="utf-8">
			mui.init();
			mui.plusReady(function() {
				//首页返回事件
	        plus.navigator.setStatusBarBackground('#e6cb4f');
				
				var firsts = null;
		        mui.back = function back(){
		            //首次按键，提示‘再按一次退出应用’
		            if (!firsts) {
	                    firsts = new Date().getTime();
	                    mui.toast('再按一次退出应用');
	                    setTimeout(function() {
	                        firsts = null;
	                    }, 1000);
	                } else {
	                    if (new Date().getTime() - firsts < 1000) {
	                        plus.runtime.quit();
	                    }
	                }
		        };
				//读取本地存储，检查是否为首次启动
//				var showGuide = plus.storage.getItem("lauchFlag");
//				if(showGuide) {
//					//有值，说明已经显示过了，无需显示
//				} else {
//					//显示启动导航
//					mui.openWindow({
//						id: 'guide',
//						url: 'guide.html'
//					});
//				}
				//检查版本
//				var verson = '1.0';
//				mui.getJSON(
//					'http://hoa.hcoder.net/index.php?m=ver',
//					function(res) {
//						if(verson != res.v) {
//							mui.toast('正在更新版本');
//							var dtask = plus.downloader.createDownload(
//								res.src, {
//									method: "GET"
//								},
//								function(d, status) {
//									if(status == 200) {
//										mui.toast('新版本下载成功，开始安装');
//										plus.runtime.install(d.filename);
//									}
//								}
//							);
//							dtask.start();
//						}
//					}
//				);
				var subInfos = [{
					url: 'home.html',
					id: 'home'
				}, {
					url: 'discover.html',
					id: 'discover',
				}, {
					url: 'classify/index.html',
					id: 'classify/index'
				}, {
					url: 'show.html',
					id: 'show'
				}, {
					url: 'account.html',
					id: 'account'
				}];
				var subStyles = {
					top: '0',
					bottom: '50px'
				};

				// 根据id查询子页面的信息
				var getSubInfoById = function(infoList, id) {
					var result = null;
					for(var i = 0, len = infoList.length; i < len; i++) {
						var _info = infoList[i];
						if(_info.id === id) {
							result = _info;
							break;
						}
					}
					return result;
				};

				var mainWv = plus.webview.currentWebview();
				var activeTab = '';

				// 默认只加载首页webview
				var homeWv = plus.webview.create(subInfos[0].url, subInfos[0].id, subStyles);
				mainWv.append(homeWv);
				activeTab = subInfos[0].id;

				// 点击切换，动态创建其它webview；
				mui('.mui-bar-tab').on('tap', 'a.mui-tab-item', function(e) {
					var _self = this;
					var targetTab = _self.getAttribute('id');
					if(targetTab === activeTab) {
						return;
					}
					if(targetTab === "classify/index") {
						mui.openWindow({
							url: 'classify/index.html',
							id: 'classify/index'
						});
						return false;
					}
					var _subWv = plus.webview.getWebviewById(targetTab);
					// 若webview不存在，则创建；
					if(!_subWv) {
						var _subInfo = getSubInfoById(subInfos, targetTab);
						_subWv = plus.webview.create(_subInfo.url, _subInfo.id, subStyles);
						mainWv.append(_subWv);
					}
					// 隐藏之前的webview
					plus.webview.close(activeTab); 
//					plus.webview.getWebviewById(activeTab).hide('none');
					activeTab = targetTab;
				});
			});


		</script>
	</body>

</html>